import React,{Component} from 'react'
import {HomeBox} from './style'
import 'antd/dist/antd.css'
import { Layout, Menu, Icon } from 'antd';
import {Router,Route,NavLink,Switch,Redirect} from 'dva/router';
import List from './components/list'
import {connect} from 'dva'
import imgsrc from '../../static/images/touxiang.jpeg'
const { Header, Sider, Content } = Layout;
const TeacherList1 = ()=><h1>TeacherList1</h1>
const TeacherList2 = ()=><h1>TeacherList2</h1>
class Home extends Component{
    constructor(){
        super();
        this.state = {
            collapsed: false,
        }
    }
    
    toggle = () => {
        this.setState({
          collapsed: !this.state.collapsed,
        });
      }
     
    render(){
        return(
            <HomeBox>
                
                <Layout className='layout-home-out'>
                    <Sider
                    trigger={null}
                    collapsible
                    collapsed={this.state.collapsed}
                    >
                    <div className="logo" >
                        <img src={imgsrc}></img>
                    </div>
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']} className='nav-left'>
                        <Menu.Item key="1">
                        <Icon type="user" />
                        <span><NavLink to='/home/teacherList'>nav 1</NavLink></span>
                        </Menu.Item>
                        <Menu.Item key="2">
                        <Icon type="video-camera" />
                        <span><NavLink to='/home/teacherList1'>nav 2</NavLink></span>
                        </Menu.Item>
                        <Menu.Item key="3">
                        <Icon type="upload" />
                        <span><NavLink to='/home/teacherList2'>nav 3</NavLink></span>
                        </Menu.Item>
                    </Menu>
                    </Sider>
                    <Layout>
                    <Header style={{ background: '#fff', padding: 0 }}>
                        <Icon
                        className="trigger"
                        type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                        onClick={this.toggle}
                        />
                    </Header>
                    <Content style={{
                        margin: '24px 16px', padding: 24, background: '#fff', minHeight: 600,
                    }}
                    >
                        <Route path='/home/teacherList' exact component={List}></Route> 
                        {/* 子路由 */}
                        <Route path='/home/teacherList1' exact component={TeacherList1}></Route> 
                        <Route path='/home/teacherList2' exact component={TeacherList2}></Route> 
                    </Content>
                    </Layout>
                </Layout>
               
            </HomeBox>
        )
    }
}
export default connect(state=>{
    return {
        
    }
})(Home);